<template>
  <PageWrapper>
    <Skeleton :loading="loading">
    <div class="flex flex-col gap-4">
      <Card class="count-container">
      <div class="flex">
        <Space size="large">
          <div><Tag color="success">数据中心</Tag> 智电云智能充电管理平台数据中心：</div>
          <div><i class="icon iconfont" style="color: #49bf6d;font-size: 16px;margin-right: 4px">&#xe62c;</i>客户总数：{{ countData.data.memberTotal }} (<i class="icon iconfont" style="color: #5eb95e;font-size: 16px;margin-right: 4px">&#xe652;</i>今日新增：{{ countData.data.memberToday }}, <i class="icon iconfont" style="color: #5eb95e;font-size: 16px;margin-right: 4px">&#xe652;</i>昨日新增：{{ countData.data.memberYestoday }})</div>
          <div><i class="icon iconfont" style="color: #0e9ae3;font-size: 16px;margin-right: 4px"> &#xe881;</i>企业客户数：{{ countData.data.companyCount }}</div>  
          <div><i class="icon iconfont" style="color: #d51c1c;font-size: 16px;margin-right: 4px"> &#xe6a2;</i>电桩总数：{{ countData.data.pileTotal }}(<i class="icon iconfont" style="color: #e04b47;font-size: 16px;vertical-align: middle;margin-right: 4px">&#xe6af;</i>快充{{ countData.data.fastTotal }} <i class="icon iconfont" style="color: #e04b47;font-size: 16px;vertical-align: middle;margin-right: 4px">&#xe6af;</i>慢充 {{ countData.data.slowTotal }})</div>
        </Space>
      </div>
    </Card>
    <a-row :gutter="24" gutter="24">
      <a-col :span="6">
        <InfoCard title="总用电量" icon="carbon:flash-filled" :value="countData.data.powerSum" precision="3" suffix="度" color="#74d3cb"/>
      </a-col>
      <a-col :span="6">
        <InfoCard title="昨日用电" icon="carbon:flash-filled"  :value="countData.data.powerYestoday" precision="3"  suffix="度" color="#946f56" />
      </a-col>
      <a-col :span="6">
        <InfoCard title="今日用电" icon="carbon:flash-filled"  :value="countData.data.powerToday" precision="3"  suffix="度" color="#55c4b1" />
      </a-col>
      <a-col :span="6">
        <InfoCard title="客户总数" icon="garden:customer-lists-fill-26" :value="countData.data.memberTotal" suffix="人" color="#5eb95e"/>
      </a-col>
    </a-row>
    <a-row :gutter="24" gutter="24">
      <a-col :span="6">
        <InfoCard title="订单总数" icon="lsicon:order-filled" :value="countData.data.orderTotal" suffix="个" color="#e3c755"/>
      </a-col>
      <a-col :span="6">
        <InfoCard title="充值总额" icon="icon-park-twotone:paper-money" :value="countData.data.chargeTotal" precision="2" prefix="¥" color="#4580d1"/>
      </a-col>
      <a-col :span="6">
        <InfoCard title="昨日充值" icon="icon-park-twotone:paper-money" :value="countData.data.chargeYestoday" prefix="¥" precision="2" suffix="元" color="#5eb95e"/>
      </a-col>
      <a-col :span="6">
        <InfoCard title="今日充值" icon="icon-park-twotone:paper-money" :value="countData.data.chargeToday" prefix="¥" precision="2"suffix="元" color="#e04b47"/>
      </a-col>
    </a-row>
    <Card>
      选择地区：
      <RadioGroup v-model:value="currentArea" button-style="solid" @change="handleAreaChange" class="mb-4">
          <RadioButton :value="''" :key="0">全国</RadioButton>
          <RadioButton :value="item.id" :key="item.id" v-for="(item, index) in areaList">{{ item.name }}</RadioButton>
        </RadioGroup>
      <Row gutter="24" class="mb-4">
        <Col :span="12">
          <DayPowerChart ref="dayPowerChart"/>
        </Col>
        <Col :span="12">
          <FaultChart ref="defaultChart"/>
        </Col>
      </Row>
      <Row gutter="24">
        <Col :span="12">
          <MonthPowerChart ref="monthPowerChart" />
        </Col>
        <Col :span="12">
          <MonthMemberChart ref="monthMemberChart"/>
        </Col>
      </Row>
    </Card>
    </div>
    </Skeleton>
  </PageWrapper>
</template>
<script>
  import { defineComponent } from 'vue';
  export default defineComponent({
      name: 'Workbench',
  });
</script>
<script setup>
  import { reactive, ref } from 'vue';
  import { onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { Card, Tag, Space, Row, Col, Skeleton, RadioGroup, RadioButton } from 'ant-design-vue';
  import PageWrapper from '@/components/Page/src/PageWrapper.vue';
  import { defHttp } from '@/utils/http/axios';
  import DayPowerChart from './components/dayPowerChart.vue';
  import MonthPowerChart from './components/monthPowerChart.vue';
  import FaultChart from './components/faultChart.vue';
  import MonthMemberChart from './components/monthMemberChart.vue';
  import InfoCard from './components/infoCard.vue';
  const countData = reactive({
    data: {
      admin: {},
      memberTotal: 0,
      memberToday: 0,
      memberYestoday: 0,
      orderTotal: 0,
      orderToday: 0,
      orderYestoday: 0,
      chargeToday: 0,
      chargeYestoday: 0,
      chargeTotal: 0,
      pileTotal: 0,
      fastTotal: 0,
      slowTotal: 0,
      companyCount: 0,
      powerSum: 0,
      powerToday: 0,
      powerYestoday: 0,
      openedArea: [],
      areaId: '',
      stationList: [],
    }
  })
  const loading = ref(false)
  // 返回数据中拆分数据
  const currentArea = ref('')
  const areaList = ref([])
// 获取统计数据
  const getCountData = async() => {
    loading.value = true
    try {
      const res = await defHttp.get({
        url: '/admin/main/welcome',
      });
      countData.data = res
      currentArea.value = res.areaId
      areaList.value = res.openedArea
    } catch (error) {
      console.log(error)
    } finally {
      loading.value = false
    }
  }
  const handleAreaChange = (e) => {
    const { target } = e
    const { value } = target
    countData.data.areaId = value
    dayPowerChart.value.reload(value)
    monthPowerChart.value.reload(value)
  }
  const dayPowerChart = ref(null)
  const monthPowerChart = ref(null)
  onMounted(async() => {
    await getCountData()
    dayPowerChart.value.reload(countData.data.areaId)
    monthPowerChart.value.reload(countData.data.areaId)
  });
</script>
<style lang="less" scoped>
  .count-container {
    img {
      width: 20px;
      height: 20px;
    }
  }
</style>